<template>
	<div class="body">
		<el-upload class="avatar-uploader" action="/upload/image" :show-file-list="false"
			:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
			<img v-if="imageUrl" :src="imageUrl" class="avatar" />
			<el-icon v-else class="avatar-uploader-icon">
				<plus />
			</el-icon>
		</el-upload>
		<h3>当前积分：{{integrate}}
			<el-button @click="tiaozhuan()">查看积分记录</el-button>
		</h3>
		<h1><span @click="open">{{name}}</span></h1>
		<div>
			<h3>个人介绍</h3>
			<el-input type="textarea"></el-input>
		</div>
		<h3>个人邀请码：<span @click="fuzhi">{{InviteCode}}(点击可复制)</span></h3>
	</div>
</template>

<script>
	import {
		Plus
	} from '@element-plus/icons-vue'
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	export default {
		components: {
			plus: Plus
		},
		data() {
			return {
				imageUrl: "",
				integrate: "",
				name: "设置昵称",
				InviteCode: ""
			}
		},
		mounted() {
			this.tupian();
		},
		methods: {
			tiaozhuan(){
				this.$router.push({
					path: '/jifenjilu'
				})
			},
			open() {
				ElMessageBox.prompt('请输入你的名称', '弹出框', {
						confirmButtonText: 'OK',
						cancelButtonText: 'Cancel',
					})
					.then(({
						value
					}) => {
						this.name = value;
						this.$axios.get('/user/updatename', {
								params: {
									name: value
								}
							})
						ElMessage({
							type: 'success',
							message: `你的名字为${value}`,
						})
					})
					.catch(() => {
						ElMessage({
							type: 'info',
							message: '输入取消',
						})
					})
			},
			fuzhi() {
				this.copyContent = this.InviteCode; //也可以直接写上等于你想要复制的内容
				var input = document.createElement("input"); // 直接构建input
				input.value = this.copyContent; // 设置内容
				console.log(input.value);
				document.body.appendChild(input); // 添加临时实例
				input.select(); // 选择实例内容
				document.execCommand("Copy"); // 执行复制
				document.body.removeChild(input); // 删除临时实例
				this.$message({
					message: "复制成功",
					type: 'success'
				})
			},
			handleAvatarSuccess() {
				this.tupian();
				location.reload();
			},
			beforeAvatarUpload() {},
			tupian() {
				this.$axios.post('/user/seltupain')
					.then(data => {
						if (data.result.user.avatar !=
							"http://localhost:8082/image/src=http___i0.qhimg.com_dmsmty_350_200__t01d269f7a305bcc96f.jpg&refer=http___i0.qhimg.jpg"
						) {
							this.imageUrl = data.result.user.avatar;
						}
						if (data.result.user.name != null) {
							this.name = data.result.user.name;
						}
						this.InviteCode = data.result.user.inviteCode;
						this.integrate = data.result.user.integrate;
					})
			}
		}
	}
</script>


<style scoped>
	.body {
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: center;
	}

	.avatar {
		width: 200px;
		height: 200px;
		border-radius: 50%;
	}

	.avatar-uploader {
		border: 1px solid #d9d9d9;
		width: 200px;
		height: 200px;
		border-radius: 50%;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
